<script setup>
import { ref, reactive } from 'vue'
import { placeGarrison } from '@/assets/api/safe'
defineProps({
    visible: {
        type: Boolean,
        required: true,
    },
    activeData: {
        type: Object,
        default() {
            return null
        },
    },
})
const emits = defineEmits(['update:visible', 'success'])
function closeAction() {
    emits('update:visible', false)
}
const newFormRef = ref()
const newForm = reactive({
    ip: '',
    user_name: '',
    password: '',
})

const formRules = reactive({
    user_name: [
        {
            required: true,
            message: '请输入用户名',
        },
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
        },
    ],
    ip: [
        {
            required: true,
            message: '请输入IP地址',
        },
    ],
})
function submitAction() {
    newFormRef.value.validate((valid, fields) => {
        if (valid) {
            placeGarrison(newForm).then(() => {
                closeAction()
                emits('success')
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>

<template>
    <el-dialog
        :model-value="visible"
        :title="'布防(' + activeData.name + ')'"
        width="400px"
        :draggable="true"
        @close="closeAction"
    >
        <el-form
            ref="newFormRef"
            :model="newForm"
            label-width="80px"
            :rules="formRules"
        >
            <el-form-item label="IP地址" prop="ip">
                <el-input v-model="newForm.ip" />
            </el-form-item>
            <el-form-item label="用户名" prop="user_name">
                <el-input v-model="newForm.user_name" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="newForm.password" type="password" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeAction">取消</el-button>
                <el-button type="primary" @click="submitAction">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style lang="scss" scoped></style>
